<template>
	<view class="main">
		<view class="head">
			<view class="headInput">
				<u-search bg-color="#fff" placeholder="鞋架" :show-action="false"></u-search>
			</view>
		</view>
		<view class="contentNew">
			<view class="contentNew-title">
				<view class="contentNew-titleL">
					新人专区
				</view>
				<view class="contentNew-titleR">
					<text>更多</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="contentNew-shop">
				<view class="contentNew-shopItem" v-for="(item,i) in 10">
					<image src="../../bundle/static/images/temp-bg.png" mode=""></image>
					<view class="contentNew-shopItem-money">
						￥36
					</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="orderTilte">
				配送订单
			</view>
			<view class="orderTab">
				<view class="orderTab-l">
					<view class="orderTab-lItem orderTab-lSelect">
						全部
					</view>
					<view class="orderTab-lItem">
						进行中
					</view>
					<view class="orderTab-lItem">
						待评价
					</view>
					<view class="orderTab-lItem">
						退款/售后
					</view>
				</view>
				<view class="orderTab-r">
					<text>其他订单</text>
					<u-icon name="arrow-down-fill" size="18"></u-icon>
				</view>
			</view>
			<view class="orderList">
				<view class="orderList-item" v-for="(item,i) in 10">
					<view class="orderList-itemT">
						<view class="orderList-itemT-l">
							<text class="orderList-itemT-lL">
								中山
							</text>
							<text class="orderList-itemT-lC">
								|
							</text>
							<text class="orderList-itemT-lR">
								2023.10.30 14:34:01
							</text>
						</view>
						<view class="orderList-itemT-r">
							待支付
						</view>
					</view>
					<view class="orderList-itemC">
						<view class="orderList-itemC-left">
							<view class="orderList-itemC-l">
								<image src="../../static/images/bg_hometop.png" mode=""></image>
							</view>
							<view class="orderList-itemC-c">
								<view class="orderList-itemC-cT">
									邮寄联盟大胜靠德弄清你问的哦IQ
								</view>
								<view class="orderList-itemC-cC">
									330ML*6
								</view>
								<view class="orderList-itemC-cB">
									x1<text>冰栋6</text>
								</view>
							</view>
						</view>
						<view class="orderList-itemC-r">
							<view class="orderList-itemC-rT">
								￥36
							</view>
							<view class="orderList-itemC-rB">
								共1件
							</view>
						</view>
					</view>
					<view class="orderList-itemB">
						<view class="orderList-itemB-r">
							再来一单
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.head {
		background: url('../../static/user/j-new-default-bg@2x.jpg') no-repeat;
		background-size: 100%;
		display: flex;
		padding: 30rpx;
	}

	.headInput {
		margin-left: 30rpx;
		position: relative;
	}

	.contentNew {
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.contentNew-title {
		display: flex;
		justify-content: space-between;
	}

	.contentNew-titleL {
		font-weight: 600;
		font-size: 36rpx;
	}

	.contentNew-titleR {
		color: gray;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.contentNew-titleR text {
		margin-right: 6rpx;
	}

	.contentNew-shop {
		display: flex;
		overflow: scroll;
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.contentNew-shopItem {
		position: relative;
		margin-right: 30rpx;
		display: flex;
		justify-content: center;
	}

	.contentNew-shopItem image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.contentNew-shopItem-money {
		background: #FF212A;
		color: #F8F8F8;
		position: absolute;
		border-radius: 30rpx;
		font-size: 22rpx;
		padding: 0 6rpx;
		bottom: 0;
	}

	.order {
		padding: 30rpx;
		padding-top: 0;
	}

	.orderTilte {
		font-weight: 600;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}

	.orderTab {
		display: flex;
		justify-content: space-between;
	}

	.orderTab-l {
		display: flex;
	}

	.orderTab-r {
		display: flex;
	}

	.orderTab-r text {
		margin-right: 10rpx;
	}

	.orderTab-lSelect {
		font-weight: 600;
	}

	.orderTab-lItem {
		margin-right: 30rpx;
		font-size: 30rpx;
	}

	.orderList {
		margin-top: 50rpx;
	}

	.orderList-item {
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		padding: 20rpx;
	}

	.orderList-itemT-lR {
		position: relative;
		top: 2rpx;
		font-size: 24rpx;
	}

	.orderList-itemT-lC {
		position: relative;
	}

	.orderList-itemT {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
	}

	.orderList-itemT-l {
		display: flex;
		align-items: center;
	}

	.orderList-itemT-lC {
		margin: 0 20rpx;
	}

	.orderList-itemC-l image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.orderList-itemC {
		display: flex;
		padding: 20rpx 0;
		border-top: 2rpx solid #ededed;
		border-bottom: 2rpx solid #ededed;
		margin: 20rpx 0;
		justify-content: space-between;
	}

	.orderList-itemB {
		display: flex;
		justify-content: flex-end;
	}

	.orderList-itemC-cT {
		font-size: 26rpx;
	}

	.orderList-itemC-cC {
		font-size: 22rpx;
		color: gray;
		margin-top: 6rpx;
	}

	.orderList-itemC-cB {
		font-size: 22rpx;
		margin-top: 10rpx;
	}

	.orderList-itemC-cB text {
		background: #F0F7FE;
		border: 2rpx solid #54ABF2;
		padding: 2rpx 10rpx;
		border-radius: 6rpx;
		color: #54ABF2;
		margin-left: 20rpx;
	}

	.orderList-itemC-left {
		display: flex;
	}

	.orderList-itemC-r {
		font-size: 24rpx;
	}

	.orderList-itemC-rB {
		color: gray;
		font-size: 22rpx;
		margin-top: 6rpx;
	}

	.orderList-itemB-r {
		padding: 10rpx 30rpx;
		display: inline-block;
		border: 2rpx solid gray;
		border-radius: 10rpx;
	}
</style>
